<template>
  <BasicModal
    @register="register"
    title="体验版"
    width="600px"
    :canFullscreen="false"
    :showOkBtn="false"
    :showCancelBtn="false"
    :loading="loading"
  >
    <div class="imgBox">
      <img :src="src" alt="" />
      <h1>{{ wechatAppName }}</h1>
    </div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { ref } from 'vue';
  import { trialQRCode } from '@/api/version';

  const src = ref();
  const loading = ref(false);
  const wechatAppName = ref();

  const [register] = useModalInner(async (data) => {
    console.log(data.record);
    try {
      wechatAppName.value = data.record.wechatAppName;
      loading.value = true;
      let res = await trialQRCode(data.record.tenantId);
      loading.value = false;
      src.value = res;
    } catch (error) {
      loading.value = false;
    }
  });
</script>

<style lang="less" scoped>
  .imgBox {
    width: 500px;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }
  h1 {
    font-size: 18px;
    text-align: center;
  }
</style>
